<script setup lang="ts">
    import {onMounted, ref} from 'vue'
    import Top from './components/top/index.vue'
    import Age from './components/age/index.vue'
    import Sex from './components/sex/index.vue'
    import Tourist from './components/tourist/index.vue'
    // 中间组件
    import Map from './components/map/index.vue'
    import Line from './components/line/index.vue'
    // 右侧
    import Rank from './components/rank/index.vue'
    import Year from './components/year/index.vue'
    import Counter from './components/counter/index.vue'
    const screen = ref<any>()
    

    onMounted(() => {
        screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    })

    // 定义大屏缩放比例
    function getScale(w= 1920, h= 1080) {
        const ww = window.innerWidth / w
        const wh = window.innerHeight / h
        return ww < wh ? ww : wh
    }

    // 监听视口变化
    window.onresize = () => {
        screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    }
</script>


<template>
    <div class="container">
        <div class="screen" ref="screen">
            <div class="top">
                <Top/>
            </div>
            <div class="bottom">
                <div class="left">
                    <Tourist class="tourist" />
                    <Sex class="sex" />
                    <Age class="age" />
                </div>
                <div class="center">
                    <Map class="map"></Map>
                    <Line class="line"></Line>
                </div>
                <div class="right">
                    <Rank class="rank"></Rank>
                    <Year class="year"></Year>
                    <Counter class="counter"></Counter>
                </div>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
    .container{
        width: 100vw;
        height: 100vh;
        background: url('./images/bg.png') no-repeat;
        background-size: cover;
        .screen{
            position: fixed;
            width: 1920px;
            height: 1080px;
            left: 50%;
            top: 50%;
            transform-origin: left top;
            color: #fff;
            .top{
                width: 100%;
                height: 40px;
            }
            .bottom{
                display: flex;
                .left{
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    height: 1040px;
                    .tourist{
                        flex: 1.4;
                    }
                    .sex{
                        flex: 1;
                    }
                    .age{
                        flex: 1;
                    }
                }
                .center{
                    display: flex;
                    flex-direction: column;
                    flex: 1.5;
                    .map{
                        flex: 3;
                    }
                    .line{
                        flex: 1;
                    }
                }
                .right{
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    margin-left: 40px;
                    .rank{
                        flex: 1;
                    }
                    .year{
                        flex: 1;
                    }
                    .counter{
                        flex: 1.3;
                    }
                }
            }
        }
    }
</style>